import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  Platform,
} from 'react-native';

import PxToDp from '../../utils/PxToDp';
import AboutUs from './AboutUs';
import Feedback from './Feedback';
import Login from '../../containers/LoginContainer';
import CommonStorage from '../../utils/CommonStorage';
import Request from '../../utils/request';
import NavCon from '../Public/NavCon';
import ModifyEmail from './ModifyEmail';
import ModifyPwd from './ModifyPwd';

export default class SetupItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: this.props.dealerInfo.saler && this.props.dealerInfo.saler.email ? this.props.dealerInfo.saler.email : '',
    };
  }
  _logOut = () => {
    CommonStorage.removeStorage('uid');
    CommonStorage.removeStorage('tpl');
    CommonStorage.removeStorage('factoryId');
    this.props.navigator.resetTo({
      title: 'Login',
      component: Login,
    });
    Request.get({
      url: '/logout',
      accept: 'text',
      success: () => {
      },
      fail: (data) => {
        console.log('logout fail: ', data);
      },
      error: (error) => {
        console.log('logout error: ', error);
      },
    });
  }
  _handleIntroChange(e) {
    this.setState({ email: e.target.value });
  }
  _goModifyEmail() {
    const { dispatch } = this.props;
    const saler = this.props.dealerInfo.saler;
    const emails = this.state.email;
    this.props.navigator.push({
      title: 'ModifyEmail',
      name: 'ModifyEmail',
      component: ModifyEmail,
      passProps: {
        getEmail: (email) => {
          this.setState({ email });
        },
        dispatch,
        saler,
        emails,
      },
    });
  }
  _goModifyPwd() {
    const { dispatch } = this.props;
    const saler = this.props.dealerInfo.saler;
    this.props.navigator.push({
      title: 'ModifyPwd',
      name: 'ModifyPwd',
      component: ModifyPwd,
      passProps: {
        // getEmail: (email) => {
        //   this.setState({ email });
        // },
        dispatch,
        saler,
      },
    });
  }
  render() {
    const { dispatch } = this.props;
    // const saler = this.props.dealerInfo.saler;
    return (
      <View style={[style.titleTop, style.flex]}>
        <NavCon
          currentTitle={'设置'}
          bgColor={'#fff'}
          onPress={() => this.props.navigator.pop()}
        />
        <View style={style.mainContainer}>


          <View style={{ marginTop: PxToDp(34) }}>
            <View style={[style.line]}>
              <TouchableOpacity
                style={[style.flex, style.borderbottom, style.row, style.left]}
                activeOpacity={0.75}
                onPress={() => this._goModifyEmail()}
              >
                <Text style={[style.flex, style.word]}>更改邮箱</Text>
                <Text style={style.valueText}>{this.state.email}</Text>
                <Image style={style.img} source={require('../../img/next.png')} />
              </TouchableOpacity>
            </View>
            <View style={style.line}>
              <TouchableOpacity
                style={[style.flex, style.borderbottom, style.row, style.left]}
                activeOpacity={0.75}
                onPress={() => this._goModifyPwd()}
              >
                <Text style={[style.flex, style.word]}>更改密码</Text>
                <Image style={style.img} source={require('../../img/next.png')} />
              </TouchableOpacity>
            </View>
          </View>


          <View style={{ marginTop: PxToDp(34) }}>
            <View style={[style.line]}>
              <TouchableOpacity
                style={[style.flex, style.borderbottom, style.row, style.left]}
                activeOpacity={0.75}
                onPress={() => {
                  this.props.navigator.push({
                    title: 'Feedback',
                    passProps: { dispatch },
                    component: Feedback,
                  });
                }
                  }
              >
                <Text style={[style.flex, style.word]}>意见反馈</Text>
                <Image style={style.img} source={require('../../img/next.png')} />
              </TouchableOpacity>
            </View>
            <View style={style.line}>
              <TouchableOpacity
                style={[style.flex, style.borderbottom, style.row, style.left]}
                activeOpacity={0.75}
              >
                <Text style={[style.flex, style.word]}>给我们评分</Text>
                <Image style={style.img} source={require('../../img/next.png')} />
              </TouchableOpacity>
            </View>
            <View style={[style.line]}>
              <TouchableOpacity
                style={[style.flex, style.row, style.borderbottom, style.left]}
                activeOpacity={0.75}
                onPress={() => {
                  this.props.navigator.push({
                    title: 'AboutUs',
                    component: AboutUs,
                  });
                }
                  }
              >
                <Text style={[style.flex, style.word]}>关于我们</Text>
                <Image style={style.img} source={require('../../img/next.png')} />
              </TouchableOpacity>
            </View>
          </View>


          <View style={{ marginTop: PxToDp(34) }}>
            <View style={[style.line, style.borderbottom, style.marginTop]}>
              <TouchableOpacity style={[style.flex, style.row, style.left]} activeOpacity={0.75}>
                <Text style={[style.flex, style.word]}>清空缓存</Text>
                <Text style={style.valueText}>0M</Text>
              </TouchableOpacity>
            </View>
          </View>


          <View style={style.btn}>
            <TouchableOpacity
              style={style.btndefault}
              onPress={() => this._logOut()}
            >
              <View activeOpacity={0.75} >
                <Text style={style.word}>退出账号</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

const style = StyleSheet.create({
  flex: {
    flex: 1,
  },
  line: {
    height: PxToDp(47),
    backgroundColor: '#fff',
  },
  left: {
    paddingLeft: PxToDp(20),
  },
  mainContainer: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  borderbottom: {
    borderStyle: 'solid',
    borderBottomWidth: 1,
    borderColor: '#EDEDED',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingRight: 20,
  },
  word: {
    fontFamily: 'PingFangSC-Regular',
    fontSize: PxToDp(16),
    color: '#333333',
  },
  img: {
    width: PxToDp(11),
    height: PxToDp(14),
  },
  btn: {
    height: PxToDp(44),
    marginTop: PxToDp(55),
  },
  btndefault: {
    flex: 1,
    backgroundColor: '#fff',
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
  },
  valueText: {
    fontFamily: 'PingFangSC-Regular',
    fontSize: PxToDp(14),
    color: '#999999',
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
});
